<template>
  <div class="container">
    <!-- <Search></Search> -->
    <!-- 面包屑 -->
    <div class="bread">
      <Breadcrumb>
        <BreadcrumbItem to>全部</BreadcrumbItem>
        <BreadcrumbItem to>{{bookname}}</BreadcrumbItem>
        <BreadcrumbItem>共{{this.bookcount}}件商品</BreadcrumbItem>
      </Breadcrumb>
     
      <div v-if="this.bookcount>0">
       <div class="cardcontainer">
        <Card
          style="width:80%"
          :bordered="false"
          v-for="(item, index) in searchBookList"
          :key="index"
          class="card"
        >
          <div class="card">
            <div style="text-align:center;width:300px;height:200px">
              <router-link :to="'/gooddetail/'+item.bookid">
                <!-- 这里要用100%才能显示完整的图片 -->
                <img :src="item.bookImg" height="100%" width="100%" />
              </router-link>
            </div>
            <div>
              <h2 style="color:black">{{item.bookname}}</h2>
              <span>作者:</span><span style="color:blue">{{item.author}}</span>
 <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template=1.5
            ></el-rate>
              <h2 style="color:red">￥{{item.price}}</h2>
              <h2 style="text-decoration:line-through;color:grey;font-size:15px;font-famaily">￥{{item.oldprice}}</h2>
              <h2 style="color:black;font-size:15px">{{item.desc}}</h2>
            </div>
          </div>
        </Card>
      </div>
    </div>
    <div v-else>
      <div style="padding: 100px 50px; ">     
         <h1>抱歉，没有找到与“”相关的商品</h1> 
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import Search from "../Search.vue";
export default {
  data() {
    return {
      is:true,
      // 搜索到的图书
      searchBookList: [],
      //   图书数量
      bookcount: 0,
      bookname: this.$route.query.bookname,
      queryInfo: {
        query: this.$route.query.bookname
      },
      list1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    };
  },
  methods: {
    async searchBooks() {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/admin/goodList/searchgoods",
        {
          params: this.queryInfo
        }
      );
      this.bookcount = res.data.length;
      this.searchBookList = res.data;
        console.log(this.bookcount)
    },
    handleReachBottom() {
      return new Promise(resolve => {
        setTimeout(() => {
          const last = this.list1[this.list1.length - 1];
          for (let i = 1; i < 11; i++) {
            this.list1.push(last + i);
          }
          resolve();
        }, 2000);
      });
    }
  },
  created() {
    this.searchBooks();
  },
  components: {
    Search
  }
};
</script>

<style scoped>
.container {
  /* 让内容主体整体居中 */
  margin: auto 350px;
  height: 1000px;
}
.bread {
  margin-top: 20px;
}
/* 卡片容器 */
.cardcontainer {
  margin-top: 20px;
}
.cardcontainer .card {
  display: flex;
  margin-bottom: 20px;
}
</style>